import DashboardLayout from '@/components/layout/DashboardLayout'
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"


export default function Docs() {
  const docs = [
    {
      title: "Windows 使用教程",
      content: [
        "1. 下载并安装最新版本的客户端",
        "2. 打开客户端，输入您的账号密码登录",
        "3. 选择合适的节点连接",
        "4. 连接成功后即可开始使用"
      ]
    },
    {
      title: "MacOS 使用教程",
      content: [
        "1. 从 App Store 下载客户端",
        "2. 安装完成后打开应用",
        "3. 使用您的账号登录",
        "4. 选择节点并连接"
      ]
    },
    {
      title: "iOS 使用教程",
      content: [
        "1. 在 App Store 搜索并下载客户端",
        "2. 打开应用并登录",
        "3. 点击节点列表选择合适的节点",
        "4. 点击连接按钮开始使用"
      ]
    },
    {
      title: "Android 使用教程",
      content: [
        "1. 在 Google Play 下载安装客户端",
        "2. 登录您的账号",
        "3. 在节点列表中选择节点",
        "4. 点击连接即可使用"
      ]
    }
  ]

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold tracking-tight">使用文档</h2>
        </div>
        <div className="grid gap-6 md:grid-cols-2">
          {docs.map((doc, index) => (
            <Card key={index}>
              <CardHeader>
                <CardTitle>{doc.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="list-disc list-inside space-y-2">
                  {doc.content.map((item, itemIndex) => (
                    <li key={itemIndex} className="text-gray-600">
                      {item}
                    </li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          ))}
        </div>
        <Card>
          <CardHeader>
            <CardTitle>常见问题</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {/* ... 保持原有的常见问题内容不变 */}
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}